<template>
  <div>
    <div v-show="showCer" @click.stop="closeCertificate" :class="[matchPaper.shapeType==2?'c-ph40':'c-ph100',matchPaper.shapeType==2&&formOirn==3?'c-pt200':'',formOirn==3?'c-bg-sgray c-flex-center c-h c-flex-column c-pb88 c-maxw640 c-pt40':'c-translucent-balck60 c-pt80 c-pz1000 c-pf c-flex-column c-p-t0 c-flex-center c-h c-w100 c-maxw640']" class="">
      <div class="c-flex-center c-flex-column">
        <img class="c-w100" id="horSpreadCerImg" src="" alt="" @click.stop="showCerPop=true">
        <div class="c-fs24 c-textAlign-c c-mt16 " :class="formOirn==3?'c-fc-sblack':'c-fc-white'">长按保存图片，分享给好友</div>
        <div class="c-fs24 c-fc-white c-textAlign-c c-mt8 " v-if="formOirn==0">前往<span class="theme-fc" @click.stop="goToAchievem">我的成就</span>查看更多证书</div>
      </div>
    </div>
    <div v-show="showCer&&formOirn==3&&showCerPop" @click.stop="closeCertificate" :class="[matchPaper.shapeType==2?'c-ph40':'c-ph100','c-translucent-balck80 c-pz1000 c-pf c-flex-column c-p-t0 c-flex-center c-h c-w100 c-maxw640']" class="">
      <img class="c-w100" id="horSpreadCerImgPf" src="" alt="">
      <div class="c-fs24 c-textAlign-c c-mt16 c-fc-white">长按保存图片，分享给好友</div>
    </div>
    <section v-if="formOirn==3" class=" c-flex-row c-ph24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1 mb7_green">
      <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end c-w0">
        <div @click.stop="backHome" class="c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28 theme-bg c-fc-white"> 返回首页 </div>
      </div>
    </section>
    <div class="canvasBox c-flex-row" v-if="matchPaper.certificateType == 1&&matchPaper.shapeType==1">
      <div class="anvasContent c-p" id="honortioncanvas1">
        <img :src="$addXossFilter(spreadInfo.bgImgUrl)" alt class="c-w100 c-h img-pe-none">
        <div class="customOne bgLocation">
          <div style="font-size: 60px;color: #333333;font-weight: 600;padding-top: 130px;" class="c-textAlign-c">{{spreadInfo.title}}</div>
          <div style="margin:88px auto 0;width: 510px;" :class="matchPaper.nameStyleType==2?'c-opacity0':''">
            <div class="c-flex-column c-aligni-center c-justify-center">
              <div class="c-brp50 c-text-hidden" style="width:120px;height:120px;" :class="matchPaper.enableAvatarShow==0?'c-opacity0':''">
                <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-w100 c-h img-pe-none">
              </div>
              <div class=" c-fw-b c-textAlign-c" style="height:45px;font-size:32px;margin-top:12px;">{{matchPaper.nameTypeShow == 0?'':matchPaper.nameTypeShow == 1 ? spreadInfo.nickname : (spreadInfo.realName == '' ? spreadInfo.nickname : spreadInfo.realName)}}</div>
            </div>
            <div class="c-fc-xblack" style="margin-top: 50px; font-size: 28px;height: 290px;">
              <div id="nameHeight1" class="c-wordBreakAll" style="letter-spacing: 2px;" :style="showDesc?'text-indent: 56px;':'text-align: center;'" v-html="spreadInfo.name"></div>
            </div>
          </div>
          <div class="c-textAlign-c c-fc-xblack" style="margin-top: 158px; font-size: 28px;">
            <!-- <div style="margin-bottom: 12px;" v-for="(item,index) in spreadInfo.wordArr" :key="index">{{ item }}</div> -->
          </div>
          <div class="c-pa" v-if="matchPaper.nameStyleType==2" style="top: 540px;margin: 0 auto;width: 260px;left: 0;right: 0;">
            <div class="c-flex-column c-aligni-center c-justify-center">
              <div class="c-brp50 c-text-hidden" style="width:120px;height:120px;" :class="matchPaper.enableAvatarShow==0?'c-opacity0':''">
                <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-w100 c-h img-pe-none">
              </div>
              <div class="c-flex-column c-aligni-center c-justify-center">
                <div class=" c-fw-b c-textAlign-c c-text-ellipsis1" style="height:45px;font-size:32px;margin-top:6px;width: 260px;">{{matchPaper.nameTypeShow == 0?'':matchPaper.nameTypeShow == 1 ? spreadInfo.nickname : (spreadInfo.realName == '' ? spreadInfo.nickname : spreadInfo.realName)}}</div>
              </div>
            </div>
          </div>
          <div class="c-pa c-w100" style="top: 980px;">
            <div class="c-flex-row c-aligni-center" style="width: 600px;margin: 0 auto;">
              <div :class="spreadInfo.enableShowQrCode == 0||
                (spreadInfo.enableInstitution == 0&&spreadInfo.enableGrantTime == 0&&spreadInfo.enableNumber == 0&&spreadInfo.enableStamp==0)?'c-justify-center':'c-justify-sb'" style="width:540px;margin:auto" class="c-flex-row">
                <div v-if="spreadInfo.enableShowQrCode==1" class="c-flex-column c-aligni-center c-textAlign-c c-justify-center">
                  <img :src="$addXossFilter(spreadInfo.qrcodeUrl)" alt class="img-pe-none" style="width:140px;height:140px">
                  <div class="c-textAlign-c c-fc-sblack" v-if="spreadInfo.enableShowQrCode==1" style="width:170px;font-size:20px;margin-top:12px">{{spreadInfo.qrCodeText}}</div>
                </div>
                <div style="width: 300px;" v-if="!(spreadInfo.enableInstitution == 0&&spreadInfo.enableGrantTime == 0&&spreadInfo.enableNumber == 0&&spreadInfo.enableStamp==0)" class="c-flex-column c-p">
                  <div v-if="spreadInfo.enableStamp!=0" style="width: 120px;height: 120px;margin: 0 auto;position: absolute;left: 0;
                right: 0;top: 0;bottom: 0;margin: 0 auto;"><img :src="spreadInfo.enableStamp==2?spreadInfo.stampImg:spreadInfo.backdropId==3?require('@/assets/i/wap/camp/pass2.png'):require('@/assets/i/wap/camp/pass.png')" alt=""></div>
                  <div style="font-size: 22px;color: #333333;width: 300px;" v-if="spreadInfo.enableInstitution == 1">{{spreadInfo.institutionName}}</div>
                  <div style="font-size: 20px;color: #666;margin-top: 14px;" v-if="spreadInfo.enableGrantTime == 1">发证日期：{{ spreadInfo.createdAt }}</div>
                  <div style="font-size: 20px;color: #666;margin-top: 8px;width: 300px;word-break: break-all;" v-if="spreadInfo.enableNumber&&spreadInfo.number">证书编号：{{spreadInfo.number}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="canvasBoxhor c-flex-row" v-if="matchPaper.certificateType == 1&&matchPaper.shapeType==2">
      <div class="anvasContenthor c-p" id="honortioncanvas3">
        <img :src="$addXossFilter(spreadInfo.bgImgUrl)" alt class="c-w100 c-h img-pe-none">
        <div class="customOne bgLocation">
          <div style="font-size: 20px;color: #333333;font-weight: 600;padding-top: 46px;" class="c-textAlign-c">{{spreadInfo.title}}</div>
          <div style="margin: 32px auto 0px;width: 450px;">
            <div class="c-flex-column c-aligni-center c-justify-center">
              <div class="c-brp50 c-text-hidden" style="width:50px;height:50px;" :class="matchPaper.enableAvatarShow==0?'c-opacity0':''">
                <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-w100 c-h img-pe-none">
              </div>
              <div class=" c-fw-b c-textAlign-c" style="height:24px;font-size:16px;margin-top:4px;">{{matchPaper.nameTypeShow == 0?'':matchPaper.nameTypeShow == 1 ? spreadInfo.nickname : (spreadInfo.realName == '' ? spreadInfo.nickname : spreadInfo.realName)}}</div>
            </div>
            <div class="c-fc-xblack" style="margin-top: 36px; font-size: 18px;height: 290px;">
              <div id="nameHeight2" class="c-wordBreakAll" style="letter-spacing: 2px;" :style="showDesc?'text-indent: 36px;':'text-align: center;'" v-html="spreadInfo.name"></div>
            </div>
            <!-- <div class="c-textAlign-c c-fc-xblack" style="margin-top: 20px; font-size: 18px;height: 30px;">
              <div v-for="(item,index) in spreadInfo.name" :key="index" style="margin-bottom:6px">{{ item }}</div>
            </div> -->
          </div>
          <div class="c-textAlign-c c-fc-xblack" style="margin-top: 4px; font-size: 16px;">
            <!-- <div style="margin-bottom: 6px;" v-for="(item,index) in spreadInfo.wordArr" :key="index">{{ item }}</div> -->
          </div>
          <div class="c-pa c-w100" style="top: 400px;">
            <div class="c-flex-row c-aligni-center" style="width: 600px;margin: 0 auto;">
              <div style="width:600px;margin:auto" class="c-flex-row c-aligni-center c-justify-sb">
                <div>
                  <div v-if="spreadInfo.enableShowQrCode==1" class="c-flex-row c-aligni-center c-justify-center">
                    <img :src="$addXossFilter(spreadInfo.qrcodeUrl)" alt class="img-pe-none" style="width:76px;height:76px">
                    <div class="c-textAlign-l" v-if="spreadInfo.enableShowQrCode==1" style="width:160px;font-size:16px;margin-left: 10px;color: #666;">{{spreadInfo.qrCodeText}}</div>
                  </div>
                </div>
                <div>
                  <div style="max-width: 360px;min-width:100px;height:90px" v-if="!(spreadInfo.enableInstitution == 0&&spreadInfo.enableGrantTime == 0&&spreadInfo.enableNumber == 0&&spreadInfo.enableStamp==0)" class="c-flex-column c-p c-textAlign-r">
                    <div v-if="spreadInfo.enableStamp!=0" style="width: 96px;height: 96px;margin: 0 auto;position: absolute;left: 0;
                right: 0;top: 0;bottom: 0;margin: 0 auto;"><img :src="spreadInfo.enableStamp==2?spreadInfo.stampImg:require('@/assets/i/wap/camp/pass.png')" alt=""></div>
                    <div style="font-size: 16px;color: #333333;" v-if="spreadInfo.enableInstitution == 1">{{spreadInfo.institutionName}}</div>
                    <div style="font-size: 16px;color: #666;margin-top: 8px;" v-if="spreadInfo.enableGrantTime == 1">发证日期：{{ spreadInfo.createdAt }}</div>
                    <div style="font-size: 16px;color: #666;margin-top: 8px;word-break: break-all;" v-if="spreadInfo.enableNumber&&spreadInfo.number">证书编号：{{spreadInfo.number}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-flex-row" :class="matchPaper.shapeType==1?'canvasBox':'shapecanvasBoxhor'" v-if="matchPaper.certificateType == 2">
      <div class="c-p" id="honortioncanvas2" :class="matchPaper.shapeType==1?'anvasContent':'shapeanvasContenthor'">
        <img :src="$addXossFilter(matchPaper.customizeImage)" alt class="c-w100 c-h img-pe-none">
        <div v-if="matchPaper.customizeControl" class="customOne bgLocation">
          <div v-for="(item,index) in matchPaper.customizeControl" :key="index">
            <div v-if="item.type==3" :style="item" class="c-pa">
              <div class="c-flex-column c-aligni-center">
                <img style="width:92px;height:92px;" :src="$addXossFilter(matchPaper.headimgurl || require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
                <p>{{matchPaper.nickname}}</p>
              </div>
            </div>
            <div v-if="item.type==2" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'vertical-align:'+item.verticalAlign">{{item.name}}</span>
            </div>
            <img v-if="item.type==1" class="c-pa" :src="item.redirectTo==1?$addXossFilter(matchPaper.defaultBaseInfo.qrCodeUrl):item.redirectTo==2?$addXossFilter(matchPaper.defaultBaseInfo.homeQrcode): $addXossFilter(item.img)" alt :style="item">
            <div v-if="item.type==6" :style="item" class="c-pa">
              <div class="c-flex-column c-aligni-center">
                <img style="width:92px;height:92px;" :src="$addXossFilter(matchPaper.headimgurl || require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
              </div>
            </div>
            <div v-if="item.type==7" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'verticalAlign:'+item.verticalAlign">
                {{item.nameTypeShow==2&&matchPaper.realName?matchPaper.realName:matchPaper.nickname}}
              </span>
            </div>
            <img v-if="item.type==8" class="c-pa" :src="$addXossFilter(item.img, require('@/assets/defult270.png'))" alt :style="item">
            <div v-if="item.type==9" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'verticalAlign:'+item.verticalAlign">
                {{item.name}}
              </span>
            </div>
            <div v-if="item.type==10&&matchPaper.number" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'word-break: break-all;verticalAlign:'+item.verticalAlign">
                证书编号：{{matchPaper.number}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
let html2canvas = null;
let imgData = {};
export default {
  name: "examinationCer",
  components: {
  },
  props: {
    isReceivedStudy: {
      type: String,
      default: 1,
    },
    bigType: {
      type: String,
      default: '',
    },
    formOirn: {
      type: String,
      default: 0,
    },
  },
  data() {
    return {
      showCer: false,
      showCerPop:false,
      isDrawing: false,
      matchPaper:{},
      spreadInfo:{},
      prodType:'',
      prodId:'',
      topicId:'',
      showDesc:false,
      time:new Date().getTime()
    };
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas-1.4.1.js").then(res => {
      html2canvas = res.default;
    })
    utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
      imgData = res;
    });
  },
  computed: {
  },
  methods: {
    goToAchievem() {
      this.$routerGo(this, "push", {
        path: "/member/myAchievement/AchievementList",
      });
    },
    backHome() {
      this.$routerGo(this, "push", { path: '/' });
    },
    closeCertificate() {
      if (this.formOirn == 3) {
        this.showCerPop = false
        return
      }
      this.showCer = false
      let ig = document.getElementById("horSpreadCerImg");
          ig.setAttribute("src", '');
    },
    canvas() {
      let domTest = this.matchPaper.certificateType == 2 ? document.getElementById("honortioncanvas2") :
      this.matchPaper.certificateType == 1 && this.matchPaper.shapeType == 1 ? document.getElementById("honortioncanvas1") :
      document.getElementById("honortioncanvas3")
      if (!domTest) {
        return;
      }
      console.timeEnd('startDraw-cardShowEnd')
      console.time('startDraw-html2canvas')
      html2canvas(domTest, {
        useCORS: true,
        logging: false,
        height: domTest.offsetHeight, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
      }).then(canvas => {// eslint-disable-line
       console.timeEnd('startDraw-html2canvas')
       console.time('startDraw-canvasToImage')
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    drawNow(id, cardId) {
      console.time('drawTotalTime')
      console.time('startDraw-cardShow')
      let $this = this;
      this.prodId = id
      this.cardId = cardId
      this.time = new Date().getTime()
      this.$loading.show({
        text: "证书生成中"
      });
      if (this.isDrawing == true) {
        return;
      }
      this.matchPaper = {}
      this.isDrawing = true;
      utilJs.getMethod(global.apiurl + 'Certificate/cardShow?id=' + this.prodId + '&type=3', function (res) {
        console.timeEnd('startDraw-cardShow')
        console.time('startDraw-cardShowEnd')
        $this.showCer = true;
        $this.showCerPop = true;
        $this.isDrawing = false;
        $this.matchPaper = res
        let bodytHeight = document.body.clientHeight
        console.log(bodytHeight)
        if (res.certificateType == 2) {
          if ($this.matchPaper.customizeControl) {
            for (let i = 0; i < $this.matchPaper.customizeControl.length; i++) {
              $this.matchPaper.customizeControl[i].height = $this.matchPaper.customizeControl[i].height * 2 + 'px'
              $this.matchPaper.customizeControl[i].width = $this.matchPaper.customizeControl[i].width * 2 + 'px'
              $this.matchPaper.customizeControl[i].lineHeight = $this.matchPaper.customizeControl[i].lineHeight * 2 + 'px'
              $this.matchPaper.customizeControl[i].left = $this.matchPaper.customizeControl[i].posX * 2 + 'px'
              $this.matchPaper.customizeControl[i].top = $this.matchPaper.customizeControl[i].posY * 2 + 'px'
              $this.matchPaper.customizeControl[i].fontSize = $this.matchPaper.customizeControl[i].size * 2 + 'px'
              $this.matchPaper.customizeControl[i].letterSpacing = $this.matchPaper.customizeControl[i].letterSpacing * 2 + 'px'
            }
          }
        } else {
          let titleT = res.longContent;
          let titleArr = [];
          if (titleT.length <= 16) {
            let title1 = titleT.substring(0, 16);
            titleArr.push(title1);
          } else if (titleT.length > 16 && titleT.length <= 34) {
            let title1 = titleT.substring(0, 16);
            let title2 = "";
            title2 = titleT.substring(16, 34);
            titleArr.push(title1);
            titleArr.push(title2);
          } else if (titleT.length > 34 && titleT.length <= 52) {
            let title1 = titleT.substring(0, 16);
            let title2 = titleT.substring(16, 34);
            let title3 = titleT.substring(34, 52);
            titleArr.push(title1);
            titleArr.push(title2);
            titleArr.push(title3);
          } else if (titleT.length > 52 && titleT.length <= 70) {
            let title1 = titleT.substring(0, 16);
            let title2 = titleT.substring(16, 34);
            let title3 = titleT.substring(34, 52);
            let title4 = titleT.substring(52, 70);
            titleArr.push(title1);
            titleArr.push(title2);
            titleArr.push(title3);
            titleArr.push(title4);
          } else {
            let title1 = titleT.substring(0, 16);
            let title2 = titleT.substring(16, 34);
            let title3 = titleT.substring(34, 52);
            let title4 = titleT.substring(52, 70);
            let title5 = titleT.substring(70, 88);
            titleArr.push(title1);
            titleArr.push(title2);
            titleArr.push(title3);
            titleArr.push(title4);
            titleArr.push(title5);
          }
          let qrcodeUrl = "";
          let qrCodeText = "长按识别图中二维码"
          if (res.redirectTo == 1) {
            qrcodeUrl = res.defaultBaseInfo.qrCodeUrl
          } else if (res.redirectTo == 2) {
            qrcodeUrl = res.defaultBaseInfo.homeQrcode;
          } else if (res.redirectTo == 3) {
            qrcodeUrl = res.customizeQrCode.img;
          }
          qrCodeText = res.qrCodeText ? res.qrCodeText : qrCodeText
          if (qrcodeUrl.includes("?")) {
            qrcodeUrl = qrcodeUrl + "&time=" + new Date().getTime();
          } else {
            qrcodeUrl = qrcodeUrl + "?time=" + new Date().getTime();
          }
          let nickname = res.nickname || ''
          let realName = res.realName || ''
          $this.spreadInfo = {
            qrCodeText:qrCodeText,
            bgImgUrl: res.image,
            headimgurl: res.headimgurl,
            nickname: nickname.length > 6 ? `${nickname.substr(0, 6)}...` : nickname,
            realName:realName.length > 6 ? `${realName.substr(0, 6)}...` : realName,
            name: res.longContent,
            title:res.title,
            qrcodeUrl: qrcodeUrl,
            word: res.content || [],
            backdropId: res.backdropId,
            contentType:res.contentType,
            enableShowQrCode:res.enableShowQrCode,
            enableInstitution:res.enableInstitution, //是否展示发证机构：1=展示；0=隐藏
            institutionName:res.institutionName, //机构名称
            enableGrantTime:res.enableGrantTime, //是否展示发证时间  1=展示；0=隐藏
            enableNumber:res.enableNumber, //是否展示证书编号 1=展示；0=隐藏
            number:res.number, //起始编号
            enableStamp:res.enableStamp, //是否展示章戳  1=展示；2=自定义; 0=隐藏
            stampImg:res.stampImg, //章戳自定义图片
            wordArr:[],
            createdAt:res.createdAt
          };
          if ($this.spreadInfo.contentType == 1) {
            let defaultWord = $this.spreadInfo.word[0];
            let firstLine = defaultWord.substring(0, 8);
            let secendLine = defaultWord.substring(8, 26);
            let thirdLine = defaultWord.substring(26, 44);
            firstLine && $this.spreadInfo.wordArr.push(
              firstLine
            );
            secendLine && $this.spreadInfo.wordArr.push(
              secendLine
            );
            thirdLine && $this.spreadInfo.wordArr.push(
              thirdLine
            );
          } else {
            $this.spreadInfo.wordArr = $this.spreadInfo.word;
          }
        }
        $this.$nextTick(() => {
          //获取当前内容的行高，超过1行
          let queryTextContent
          if ($this.matchPaper.shapeType == 1) {
            queryTextContent = document.querySelectorAll("#nameHeight1")[0];
          } else if ($this.matchPaper.shapeType == 2) {
            queryTextContent = document.querySelectorAll("#nameHeight2")[0];
          }
          let setheight = $this.matchPaper.shapeType == 1 ? 37 : 24
          if (queryTextContent && queryTextContent.offsetHeight > setheight) {
            $this.showDesc = true;
          } else {
            $this.showDesc = false;
          }
        });
          document.ontouchstart = null;
          document.ontuchmove = null;
          document.ontouchend = null;
          $this.$nextTick(() => {
            $this.canvas();
          });
      }, failRes => {
        $this.$loading.hide();
        $this.isDrawing = false;
      });
    },
    //下载图片
    downImg(imgUrl) {
      let that = this;
      return new Promise(function (resolve, reject) {
        let img = new Image();
        if (!imgUrl.includes('base64')) {
          img.crossOrigin = "anonymous";
          let nowTimeTmp = Date.now();
          imgUrl = imgUrl.includes('?') ? `${imgUrl}&time=${nowTimeTmp}` : `${imgUrl}?time=${nowTimeTmp}`;
        }
        img.src = imgUrl;
        img.onload = function () {
          resolve(img);
        };
        img.onerror = function (e) {
          console.log("下载图片失败");
          console.log(imgUrl);
          that.isDrawing = false;
          reject(e);
        };
      });
    },
    showCerImage(dataURL, shapeType) {
      let ig = document.getElementById("horSpreadCerImg");
      ig.setAttribute("src", dataURL);
      let igPf = document.getElementById("horSpreadCerImgPf");
      this.matchPaper.shapeType = shapeType
      if (this.formOirn == 3) {
        igPf.setAttribute("src", dataURL);
      }
      this.showCerPop = true
      this.showCer = true;
    },
    canvasToImage(ctx) {
      try {
        let quality = 1
        let dataURL, blob
        do {
        dataURL = ctx.canvas.toDataURL('image/jpeg', quality)
        blob = this.dataURItoBlob(dataURL)
          if (quality > 0.1) {
            quality -= 0.01
          } else {
            quality -= 0.015
          }
        } while (blob.size > 5242880 && quality > 0.07)
        // var dataURL = ctx.canvas.toDataURL("image/jpg");
        let ig = document.getElementById("horSpreadCerImg");
        ig.setAttribute("src", dataURL);
        if (this.formOirn == 3) {
          let igPf = document.getElementById("horSpreadCerImgPf");
          igPf.setAttribute("src", dataURL);
        }
        console.timeEnd('startDraw-canvasToImage')
        console.timeEnd('drawTotalTime')
        console.log(navigator.userAgent)
        this.$loading.hide();
        // var blob = this.dataURItoBlob(dataURL);
        if (this.isReceivedStudy == 0) {
          this.isDrawing = false;
          this.receiveCard(blob);
        } else if (this.isReceivedStudy == 1) {
          this.updateCardImage(blob)
          this.isDrawing = false;
        }
      } catch (err) {
        this.$loading.hide();
        this.isDrawing = false;
      }
    },
    updateCardImage(blob) {
      let that = this;
      let blobDate = []
      blob.name = that.cardId
      blobDate.push(blob)
      utilJs.imgUpload(blobDate, imgData, 'enrol', res => {
        let image = res
        utilJs.postMethod(global.apiurl + 'Certificate/updateCardImage', {
          type:that.bigType,
          id:that.prodId,
          cardId:that.cardId,
          image:image,
          shapeType:that.matchPaper.shapeType
        }, function () {
          localStorage.setItem("enrolCer", JSON.stringify(that.prodType + '-' + that.prodId));
          if (that.formOirn == 3) {
            return
          }
          that.$emit('updateImgeUrl', image);
        });
      });
    },
    receiveCard(BlobFile) {
      let that = this;
      that.isDrawing = false;
      utilJs.postMethod(global.apiurl + 'Certificate/receiveCard', {
        id:that.prodId,
        type:that.bigType,
        cardId:that.cardId
      }, function (res) {
        that.prodId = res.id
        that.isReceivedStudy = 1;
        that.updateCardImage(BlobFile)
      });
    },
    dataURItoBlob(base64Data) {
      var byteString;
      if (base64Data.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(base64Data.split(',')[1]);
      } else {
        byteString = unescape(base64Data.split(',')[1]);
      }
      var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
      var ia = new Uint8Array(byteString.length);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString});
    },
  },
};
</script>

<style scoped>
.canvasBox {
  width: 750px;
  height: 1334px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.canvasBoxhor {
  width: 750px;
  height: 530px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContenthor {
  width: 750px;
  height: 530px;
  position: relative;
}
.shapecanvasBoxhor {
  width: 1060px;
  height: 750px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.shapeanvasContenthor{
  width: 1060px;
  height: 750px;
  position: relative;
}
.anvasContent {
  width: 750px;
  height: 1334px;
  position: relative;
}
.bgLocation {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
</style>
